<template>
  <div class="permission-manager">
    <el-button type="primary" @click="showAddModal = true">添加权限</el-button>
    <el-table
        :data="perms"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="permName" label="权限名称" width="180"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" plain @click="editPerm(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" plain @click="deletePerm(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑权限的模态框 -->
    <el-dialog v-model="showAddModal" title="添加/编辑权限" width="50%" center>
      <el-form :model="currentPerm" label-width="80px">
        <el-form-item label="权限名称">
          <el-input v-model="currentPerm.permName" placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentPerm.description" placeholder="请输入权限描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="savePerm">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from "../../http/axios";
import { ref, onMounted } from 'vue';
import {ElMessage} from "element-plus";

// 定义权限类型
interface Perm {
  id?: number;
  permName: string;
  description: string;
}

// 数据模型
const perms = ref<Perm[]>([]);
const displayedPerms = ref<Perm[]>([]);
const showAddModal = ref(false);
const currentPerm = ref<Perm>({ permName: '', description: '' });

// 方法
function fetchPerms() {
  // 发送请求获取权限列表
  axios.get('/sys/perm/listAll').then((response)=>{
    if (response.data.code === 200) {
      perms.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
})
}
function cancel() {
  showAddModal.value = false;
  resetModal();
}
function addPerm() {
  currentPerm.value = { permName: '', description: '' };
  showAddModal.value = true;
}
//重置对话框
function resetModal() {
  currentPerm.value = { permName: '', description: '' };
}

function editPerm(row: Perm) {
  // 编辑权限
  currentPerm.value = { ...row };
  showAddModal.value = true;
}

function deletePerm(id: number) {
  // 发送请求删除权限
  axios.delete("/sys/perm/delete/"+id).then((response)=>{
    if (response.data.code === 200) {
      ElMessage.success(response.data.message);
      fetchPerms();
    } else {
      ElMessage.error(response.data.message);
    }
  })
  console.log(`Deleting permission with ID: ${id}`);
  // 示例代码：从列表中删除
  perms.value = perms.value.filter(p => p.id !== id);
}

function savePerm() {
  // 保存权限
  if (currentPerm.value.id) {
    // 更新权限
    const index = perms.value.findIndex(p => p.id === currentPerm.value.id);
    perms.value[index] = { ...currentPerm.value };
    //发送post请求
    axios.post('/sys/perm/update',currentPerm.value).then((response)=>{
      if (response.data.code === 200) {
        ElMessage.success(response.data.message);
        resetModal();
        fetchPerms();
      } else {
        ElMessage.error(response.data.message);
      }
    })
  } else {
    // 新增权限
    const newPerm = { ...currentPerm.value };
    console.log(newPerm);
    perms.value.push(newPerm);
    //发送post请求新增
    axios.post('/sys/perm/addPerm',newPerm).then((response)=>{
      if (response.data.code === 200) {
        ElMessage.success(response.data.message);
        resetModal();
        fetchPerms();
      } else {
        ElMessage.error(response.data.message);
      }
    })
  }
  showAddModal.value = false;
  currentPerm.value = { permName: '', description: '' };
}

// 初始化
onMounted(() => {
  fetchPerms();
});
</script>

<style scoped>
/* Ensure styles apply to el-dialog */
:deep(.el-dialog) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90% !important;
  max-height: 80vh !important;
}

/* Center the dialog body content */
:deep(.el-dialog__body) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Ensure the dialog header is centered */
:deep(.el-dialog__header) {
  text-align: center;
}

:deep(.el-dialog__body .el-form) {
  width: 100%;
}

:deep(.el-dialog__body .el-form-item) {
  margin-bottom: 20px; /* Adjust space between form items */
}
.permission-manager {
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;

  .el-table {
    margin-top: 20px;
  }

  .el-button {
    margin-bottom: 20px;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 20px;
  }
}
</style>